<template>
    <div class="menu">
        <div class="menu-item-title">
            <div @click="changeFolder" :class="{'is-active': isActive()}" class="folder-title buttons" style="padding-left: 15px;">
                <i class="iconfont icon-arrow-down" />
                <span>{{ folderItem.folderName }}</span>
                <span class="unreadNum" v-if="folderItem.unreadNum">({{ folderItem.unreadNum }})</span>
            </div>
            <template v-for="(menu, menuIndex) in folderItem.children" :key="menuIndex">
                <div @click="changeFolder(menu)" :class="{'is-active': isActivLabel(menu)}" v-if="!menu.children || !menu.children.length">
                    <div class="buttons folder-sub-title" style="padding-left: 30px;">
                        <div>
                            <span>{{ menu.folderName }}</span>
                        </div>
                    </div>
                </div>
                <template v-else>
                    <div class="pl-15">
                        <FolderItem :index="index" :parentItemAccount="parentItemAccount" :folderItem="menu" />
                    </div>
                </template>
            </template>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
import { useEmail } from '/@/stores/email';
import pinia from '/@/stores/index';
import { storeToRefs } from 'pinia';

const FolderItem = defineAsyncComponent(() => import('/@/components/folder/components/folderItem.vue'));

const stores = useEmail(pinia);
const { curAccount, curFolder } = storeToRefs(stores);

// 定义父组件传过来的值
const props = defineProps({
	folderItem: {
		type: Object,
		default: () => {}
	},
  parentItemAccount: {
		type: String,
		default: () => ''
	},
  index: {
		type: Number,
		default: () => 0
	}
});

const isActivLabel = (menu:any) => {
  let folderName = curFolder.value;
  if(curFolder.value === 'INBOX') {
    folderName = '收件箱'
  }
  return folderName === menu.folderName && props.parentItemAccount === curAccount.value;
}

const isActive = () => {
  let folderName = curFolder.value;
  if(curFolder.value === 'INBOX') {
    folderName = '收件箱'
  }

  return folderName === props.folderItem.folderName;
};

const changeFolder = (val:any) => {
    let folderName = "";
    if (val.folderName) {
        folderName = val.folderName;
    } else {
        folderName = props.folderItem.folderName;
    }

    if(folderName === '收件箱') {
        folderName = 'INBOX'
    };

    stores.setFolder(folderName);
    stores.setEmailId('');
}
</script>

<style lang="scss" scoped>
  .menu {
    width: 100%;
    font-size:12px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  
  .menu-item-title {
    width: 100%;
    position: relative;

    &::after {
      position: absolute;
      top: 28px;
      left: 0;
      width: 100%;
      height: 2px;
      content: "";
    }
  }

  .buttons {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 100%;
      padding: 0 8px;
      font-size: 12px;
      width: 100%;
      height: 30px;
      cursor: pointer;

      & > span {
        margin-left: 3px;
      }
    }
  :deep(.pl-15) {
    .folder-title {
        padding-left: 30px!important;
    }
    .folder-sub-title {
        padding-left: 45px!important;
    }
  }
  .is-active {
    background: #e6e7e9;
  }

  .unreadNum {
    font-weight: bold;
    margin-left: 3px;
  }
</style>